<template>
    <el-dialog
            title="添加权限"
            :visible.sync="powerDialog"
            :show-close="false"
            width="40%">
        <!--        内容-->
        <span>
            <el-tree
                    :data="roleList"
                    show-checkbox
                    node-key="id"
                    ref="treeRef"
                    :default-expand-all="true"
                    :default-checked-keys="defaultKeys"
                    :props="defaultProps">
</el-tree>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="addPowerData">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {addPower} from "../../../network/power";

    export default {
        name: "distriPowDia",
        props:{
            powerDialog:{
                type:Boolean,
                default(){
                    return false
                }
            },
            roleList:{
                type:Array,
                default() {
                    return [];
                }
            },
            defaultKeys:{
                type:Array,
                default(){
                    return []
                }
            },
            //当前角色Id
            roleId:{
                type:Number,
                default(){
                    return 0
                }
            }
        },
        data(){
            return{
                defaultProps:{
                    label:'authName',
                    children:'children',
                }
            }
        },
        methods:{
            quit(){
                this.$bus.$emit('powerDialog')
            },
            //添加权限
            addPowerData(){
                const keys =[...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()];
                const keyStr = keys.join(',');
                addPower(this.roleId,keyStr).then(res => {
                  if (res.data.meta.status === 200){
                      this.$message.success(res.data.meta.msg);
                      this.$bus.$emit('powerDialog');
                      this.$bus.$emit('getRolesList')
                  }else{
                      this.$message.success(res.data.meta.msg);
                  }
                });

            }
        }
    }
</script>

<style scoped lang="less">
    .el-tree{
        height: 400px;
        overflow: hidden scroll;
    }
</style>